<template>
    <div class="list">
        <IptBoxVue :keyword="keyword" @click="searchHandler"></IptBoxVue>
        <GoodsListVue :goodsData="goodsData" @go="handler"></GoodsListVue>
        <DockerVue></DockerVue>
    </div>
</template>

<script setup>
import IptBoxVue from './components/IptBox.vue';
import GoodsListVue from './components/GoodsList.vue';
import DockerVue from '@/components/Docker.vue';
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { requestGetNT } from '@/utils/Request';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter();
let keyword = ref(store.state.history.keyword);
let originData = [];
let goodsData = ref([]);
let params = reactive({
    project_id: 238,
    page: 1,
    limit: 6,
});

const getGoods = async () => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
    });
    const res = await requestGetNT('/goods', params);
    originData = originData.concat(res.data.result.rows);
    goodsData.value = originData.filter(ele => ele.name.indexOf(keyword.value) > -1);
    console.log(goodsData.value);
};
getGoods();
const handler = () => {
    if (params.page < 5) {
        params.page++;
        getGoods();
    }
};

const searchHandler = () => {
    router.push('/search?redirct=/list');
};
</script>

<style lang="scss" scoped>
.wrapper {
    position: absolute;
    padding-top: 0.12rem;
    top: 0.6rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    overflow-y: scroll;
    background-color: bisque;
}
</style>
